<template>
  <div>
    <a-row>
      <a-col :span="12"  class='mb20'>
          <a-input  placeholder="请输入名称"  class='w200'  v-model='search.keyWord'/>
          <a-button type="primary"  @click='buyerInit()'>搜索</a-button>
      </a-col>
    </a-row>
  <a-row  class='mb20'>
    <a-col :span="6">   
          <router-link  to='/buyer/add'> <a-button type="primary" icon="plus-circle">新建</a-button></router-link>
      </a-col>
  </a-row>
  <a-table :columns="columns" :dataSource="data"  :pagination="pagination"  :rowKey="record => record.code"  @change="handleTableChange">  
    <span slot='orderNum'  slot-scope="text, record" >
      <a-button size='small' ><router-link :to='{path:"/order",query:{entCode:record.code}}'>查看</router-link></a-button>
    </span>
    <span slot='creditLine'  slot-scope="text, record" >
      {{record.usedQuota}}{{record.usedQuotaUnit | moneyUnit}} / {{record.creditLine}}{{record.creditLineUnit | moneyUnit}}
    </span>
    <span slot='date'  slot-scope="text, record" >{{text | formatDates}}</span>
    <span slot='entUser'  slot-scope="text, record" >
      <a-button size='small' ><router-link :to='{path:"/ent/buyerUser",query:{entCode:record.code}}'>查看</router-link></a-button>
    </span>
    
    <span slot='createTime'  slot-scope="text, record" >{{text | formatDate}}</span>

    <span slot="action" slot-scope="text, record,index">
      <router-link  :to='{path:"/buyer/detail",query:{code:record.code}}' class='color-blue'>详情</router-link>
      <a-divider type="vertical" />
      <router-link  :to='{path:"/buyer/edit",query:{code:record.code}}'  class='color-blue'>编辑</router-link>
      <a-divider type="vertical" />
      <a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
          <a href="javascript:;"  class='color-red'>删除</a>
      </a-popconfirm>
    </span>
  </a-table>
  </div>
</template>

<script>
import  { BuyerList,buyerDel }  from  '@/api/buyer/index'
export default {
  name: 'buyer',
  data () {
    return {
        columns:[{
        dataIndex: 'name',
        key: 'name',
        title:'买方名称',
        width:'10%'
      }, {
        title: '地址',
        dataIndex: 'address',
        width:'15%'
      }, {
        title: '联系人',
        dataIndex: 'contact',
        width:'8%'
      }, {
        title: '联系方式',
        dataIndex: 'mobile',
        width:'8%'
      },
      {
        title: '订单', 
        scopedSlots: { customRender: 'orderNum' }, 
      },  
       {
        title: '授信额度', 
        scopedSlots: { customRender: 'creditLine' }, 
        width:'10%'
      },{
        title: '授信有效期',
        scopedSlots: { customRender: 'date' }, 
        dataIndex: 'buyerCredit.creditValidityPeriod',
        width:'12%'
      },{
        title: '企业用户',
        scopedSlots: { customRender: 'entUser' },  
      },{
        title: '创建时间',
        dataIndex:'createTime',
        scopedSlots: { customRender: 'createTime' },  
      },{
        title: '操作',
        key: 'action',
        scopedSlots: { customRender: 'action' },
      }],
    data:[],
    search:{
      supOrBuyer:2,
      pageNo:1,
      pageSize:10,
      keyWord:''
    },
    pagination:{
          total:0,
          pageSize: 10,//每页中显示10条数据
          showSizeChanger: true,
          pageSizeOptions: ["10", "20"],//每页中显示的数据
          showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
        },                                                                                                
    }
  },
  created(){
    this.buyerInit()
  },
  methods:{
      buyerInit(){
        BuyerList(this.search).then((res)=>{
          this.data = res.data.dataList
          this.pagination.total = res.data.totalRs
        })
      },
     confirmDel(code){
        buyerDel(code).then((res)=>{
          this.$message.success(res.data.msg)
          this.buyerInit()
        })
      },

      /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.buyerInit()
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
</style>
